<script setup lang="ts">
// 接收属性
import {useRoute} from "vue-router";
import useAdmin from "@/store/modules/admin.ts";
// 获取路由信息
const $route = useRoute();
// 使用admin仓库
const adminStore = useAdmin();
defineProps(["isCollapse"]);

defineOptions({
    name:"Aside"
})
</script>

<template>
    <el-scrollbar class="aside">
        <el-row justify="center" align="middle" class="logo">
            <img :height="25" src="@/assets/images/logo.png" alt="">
            <h3 :style="{display:isCollapse?'none':'block'}">御医坊管理系统</h3>
        </el-row>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#344056"
            class="el-menu-vertical-demo"
            :unique-opened="true"
            :default-active="$route.path"
            :collapse="isCollapse"
            :collapse-transition="false"
            text-color="#fff"
            :router="true"
        >
            <template v-for="item in adminStore.routeList" :key="item._id">
                <el-sub-menu v-if="item.children && item.children.length>0" :index="item.routePath">
                    <template #title>
                        <el-icon>
                            <component :is="item.icon"/>
                        </el-icon>
                        <span>{{item.name}}</span>
                    </template>
                    <el-menu-item v-for="item2 in item.children" :key="item2._id" :index="item2.routePath">
                        <el-icon>
                            <component :is="item2.icon"/>
                        </el-icon>
                        <span>{{item2.name}}</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item v-else :index="item.routePath">
                    <el-icon>
                        <component :is="item.icon"/>
                    </el-icon>
                    <span>{{item.name}}</span>
                </el-menu-item>

            </template>

        </el-menu>
    </el-scrollbar>

</template>

<style scoped lang="less">
    .aside{
        height: 100vh;
        background: #344056;
        .logo{
            background: #5d6678;
            height: 50px;
            //display: flex;
            //justify-content: center;
            //align-items: center;
            h3{
                padding-left: 5px;
                color:white;
                font-size: 18px;
                letter-spacing: 1px;
            }
        }
        .el-menu{
            border-right: none;
        }
    }
</style>